<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22.在局部组件中使用prop接收静态数据</title>


</head>
<body>
<div id="app">
    <!--使用组件-->
    <login user-name="小陈" age="24"></login>
</div>
<!--声明组件配置对象-->
<template id="loginTemplate">
    <h1>欢迎:{{userName}},年龄：{{ age }}</h1>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: '#loginTemplate',
        props: ['userName','age']
    }
    const app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            login
        }
    });
</script>
</body>
</html>